<template>
  <div class="phone">
    <div
      id="headlessui-tabs-panel-5"
      role="tabpanel"
      aria-labelledby="headlessui-tabs-tab-3"
      tabindex="0"
    >
      <div class="relative">
        <div class="absolute inset-y-0 left-0 flex items-center">
          <label for="country" class="sr-only">Country</label
          ><select
            id="country"
            name="country"
            class="focus:outline-none focus:ring-yellow focus:border-yellow h-full py-0 pl-3 pr-7 border-transparent bg-transparent text-gray-500 sm:text-sm rounded-md"
          >
            <option value="86">+86</option>
            <option value="1">+1</option>
            <option value="61">+61</option>
            <option value="82">+82</option>
          </select>
        </div>
        <input
          id="mobile"
          name="mobile"
          type="text"
          autocomplete="mobile"
          required=""
          placeholder="Please enter your mobile"
          v-model="form.mobile"
          class="focus:outline-none focus:ring-yellow py-3.5 focus:border-yellow block w-full pl-16 sm:text-sm rounded-md border-gray-light"
        />
      </div>
    </div>
    <div class="mt-5">
      <label for="password" class="block mb-2.5 leading-none">password</label>
      <div>
        <input
          type="password"
          id="password"
          name="password"
          autocomplete="current-password"
          required=""
          placeholder="Please enter your password"
          v-model="form.captcha"
          class="appearance-none block w-full h-full px-3 py-3.5 border rounded-md focus:outline-none focus:ring-yellow focus:border-yellow sm:text-sm disabled:bg-gray-darkest disabled:text-black-50 border-gray-light"
        />
        <p class="text-red-500 text-sm mt-1 absolute"></p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["value"],
  computed: {
    form: {
      set(value) {
        this.$emit("input", value);
      },
      get() {
        return this.value;
      },
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
